<template>
  <div>{{ count }}, {{ doubleCount }}</div>
  <div>
    <input type="text" @change="inputChange" />
  </div>
</template>

<script setup lang="ts">
import { ref, Ref, reactive, computed, ComputedRef } from 'vue';

const inputChange = (e: any) => {
  console.log(e.target.value);
};

// 下面的写法，正常来说，在等号的左边应该有一个类型注解， 就是写个 冒号加类型
// 但是现在写法和js一样，什么类型都没有加，就是因为ts有自动类型推导
// const count = ref(10);

const count1: number = 10;
const count: Ref<number | string> = ref(10);
const count2: Ref<number> = ref(20);

const doubleCount: ComputedRef<string> = computed<string>(() => {
  return count2.value * 2 + '';
});

count.value = '200';
console.log(count1);

interface AddressType {
  name: string;
  id: number;
  address?: string;
}
const aaa: AddressType = { name: 'xxx', id: 10, aaa: 333 };
console.log(aaa);

const obj: AddressType = reactive({ name: 'xxx', id: 10, aaa: 333 });
obj.address = '北京';
</script>
